import Vue from 'vue'

import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      key: 'todolist',
      // storage: window.sessionStorage
      reducer({ list }) {
        return { list }
      }
    })
  ],
  state: {
    list: [
      { id: 100, name: "吃饭", isDone: true },
      { id: 102, name: "睡觉", isDone: false },
      { id: 103, name: "打豆豆", isDone: true },
    ],
    getSel: 'all',
    isShow:false
  },
  mutations: {
    addTask(state, message) {
      state.list.push({
        id: state.list.length ? state.list.at(-1).id + 1 : 100,
        name: message,
        isDone: false
      })
    },
    delTask(state, id) {
      const index = state.list.findIndex(item => item.id === id);
      state.list.splice(index, 1)
    },
    clearFn(state) {
      state.list = state.list.filter(item => !item.isDone)
    },
    clickFn(state, str) {
      state.getSel = str
    },
    allShow(state,show) {
        state.isShow = show
        state.list.forEach(item => item.isDone = show)
    },
    smallShow(state,index) {
      state.list[index].isDone = !state.list[index].isDone
      state.isShow = state.list.every(item => item.isDone === true)
    }
  },
  getters: {
    showArr(state) {
      if (state.getSel === 'yes') {
        return state.list.filter(item => item.isDone)
      } else if (state.getSel === 'no') {
        return state.list.filter(item => !item.isDone)
      } else {
        return state.list
      }
    },

  }
})